<template>
  <ul class="px-[16px] flex flex-wrap pb-[68px]">
    <li class="relative w-[33%] pt-[30px]" v-for="(item, index) in menuitems" :key="index" >
      <a :href="item.path">
      <div><img :src="ezSip.src" alt="" class="w-[50px] h-[18px] inline-block" v-if="item.id==4" />{{ item.CH }}</div>
      <div><img :src="ezSip.src" alt="" class="w-[50px] h-[18px] inline-block" v-if="item.id==4" />{{ item.EN }}</div>
      <img :src="rightPointer.src" alt=""
        class="hover w-[16px] h-[20px] absolute right-[26px] top-[50%]  r-[12px]" />
      <img :src="rightPointerDefault.src" alt=""
        class="default w-[16px] h-[20px] absolute right-[26px] top-[50%] r-[12px]" />
      </a>
    </li>
  </ul>
</template>
<script setup>

import rightPointer from '@assets/right-pointer.png';
import rightPointerDefault from '@assets/right-pointer-default.png';

import ezSip from '@assets/product/EZSIP@.png';

const menuitems = [
  {
    CH: "负载点电源",
    EN: 'Point of Load Converter',
    path: "/productDetail",
  },
  {
    CH: "电源控制器",
    EN: 'Controller',
    path: "/about",
  },
  {
    CH: "智能功率级芯片",
    EN: 'Smart Power Stage',
    path: "/blog",
  },
  {
    CH: "微电源模块",
    EN: 'Micro Power Module',
    path: "/contact",
    id: 4
  },
  {
    CH: "智能功率电源块",
    EN: 'Smart Power Block',
    path: "/contact",
  },
]

</script>
<style lang="scss" scoped>
li {
  font-size: 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid #D8D8D8;
  box-sizing: border-box;
  color: #3D3D3D;
  font-size: 14px;
  width: calc(33% - 20px);
  margin-left: 10px;
  margin-right: 10px;

  &:hover {
    color: #712C2F;
    font-weight: 500;

    .default {
      display: none;
    }

    .hover {
      display: block;
    }
  }

  .hover {
    display: none;
  }

  .default {
    display: block;
  }
}
</style>